
<!-- TWO STEPS TO INSTALL MOVE DUAL LIST:



  1.  Copy the coding into the HEAD of your HTML document

  2.  Add the last code into the BODY of your HTML document  -->



<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->



<HEAD>



<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original:  Fred P -->

<!-- Begin

// Compare two options within a list by VALUES

function compareOptionValues(a, b) 

{ 

  // Radix 10: for numeric values

  // Radix 36: for alphanumeric values

  var sA = parseInt( a.value, 36 );  

  var sB = parseInt( b.value, 36 );  

  return sA - sB;

}



// Compare two options within a list by TEXT

function compareOptionText(a, b) 

{ 

  // Radix 10: for numeric values

  // Radix 36: for alphanumeric values

  var sA = parseInt( a.text, 36 );  

  var sB = parseInt( b.text, 36 );  

  return sA - sB;

}



// Dual list move function

function moveDualList( srcList, destList, moveAll ) 

{

  // Do nothing if nothing is selected

  if (  ( srcList.selectedIndex == -1 ) && ( moveAll == false )   )

  {

    return;

  }



  newDestList = new Array( destList.options.length );



  var len = 0;



  for( len = 0; len < destList.options.length; len++ ) 

  {

    if ( destList.options[ len ] != null )

    {

      newDestList[ len ] = new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

    }

  }



  for( var i = 0; i < srcList.options.length; i++ ) 

  { 

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Statements to perform if option is selected



       // Incorporate into new list

       newDestList[ len ] = new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

       len++;

    }

  }



  // Sort out the new destination list

  newDestList.sort( compareOptionValues );   // BY VALUES

  //newDestList.sort( compareOptionText );   // BY TEXT



  // Populate the destination with the items from the new array

  for ( var j = 0; j < newDestList.length; j++ ) 

  {

    if ( newDestList[ j ] != null )

    {

      destList.options[ j ] = newDestList[ j ];

    }

  }



  // Erase source list selected elements

  for( var i = srcList.options.length - 1; i >= 0; i-- ) 

  { 

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Erase Source

       //srcList.options[i].value = "";

       //srcList.options[i].text  = "";

       srcList.options[i]       = null;

    }

  }



} // End of moveDualList()

//  End -->

</script>



</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->



<BODY>



<div align="center"><center>



<!-- TEST DUAL LIST -->

<form ACTION="" METHOD="POST" name="myForm">

<table border="0">

<tr>

  <td>

    <!-- Multiple Select List with 20 rows size and 70 pixels wide -->

    <!-- Using   for SPACING and alignment -->

    <select multiple size="20" style="width:70" name="listLeft">

      <option value="10">      10 </option>

      <option value="20">      20 </option>

      <option value="30">      30 </option>

      <option value="40">      40 </option>

      <option value="50">      50 </option>

      <option value="A" >       A  </option>

      <option value="B" >       B  </option>

      <option value="F" >       F  </option>

      <option value="X" >       X  </option>

    </select>

  </td>

  <td><NOBR>   

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, false )"  

    name="Add     >>"  value="Add       >>">     <BR>



    <NOBR>       

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  false )"  

    name="Add     <<"  value="Add       <<">     <BR>



    <NOBR>       

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, true  )"  

    name="Add All >>"  value="Add All >>">     <BR>



    <NOBR>       

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  true  )"  

    name="Add All <<"  value="Add All <<">     <BR>

    </NOBR>

  </td>

  <td>

    <select multiple size="20" style="width:70" name="listRight">

      <option value="01">       1  </option>

      <option value="02">       2  </option>

      <option value="03">       3  </option>

      <option value="04">       4  </option>

      <option value="05">       5  </option>

      <option value="D" >       D  </option>

      <option value="G" >       G  </option>

      <option value="K" >       K  </option>

      <option value="Z" >       Z  </option>

      <option value="55">           55  </option>

    </select>

  </td>

</tr>

</table>

</form>

</center></div>



<p><center>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>



<!-- Script Size:  5.98 KB -->